<template>
  <div class="lds-css ng-scope">
    <div style="width:100%;height:100%" class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loading'
}
</script>

<style lang="scss" scoped>
  @keyframes lds-ripple {
    0% {
      top: 1.2rem;
      left: 1.2rem;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: .225rem;
      left: .225rem;
      width: 1.95rem;
      height: 1.95rem;
      opacity: 0;
    }
  }
  @-webkit-keyframes lds-ripple {
    0% {
      top: 1.2rem;
      left: 1.2rem;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: .225rem;
      left: .225rem;
      width: 1.95rem;
      height: 1.95rem;
      opacity: 0;
    }
  }
  .lds-ripple {
    position: relative;
  }
  .lds-ripple div {
    box-sizing: content-box;
    position: absolute;
    border-width: .05rem;
    border-style: solid;
    opacity: 1;
    border-radius: 50%;
    -webkit-animation: lds-ripple 2.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    animation: lds-ripple 2.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(1) {
    border-color: #0bc0e0;
  }
  .lds-ripple div:nth-child(2) {
    border-color: #0bc0e0;
    -webkit-animation-delay: -1.25s;
    animation-delay: -1.25s;
  }
  .lds-ripple {
    width: 2.5rem !important;
    height: 2.5rem !important;
    -webkit-transform: translate(-1.25rem, -1.25rem) scale(1) translate(1.25rem, 1.25rem);
    transform: translate(-1.25rem, -1.25rem) scale(1) translate(1.25rem, 1.25rem);
  }
  .ng-scope {
    display: flex;
    justify-content: center;
  }
</style>
